 <template>
    <div class="register">
        <van-nav-bar title="注册" left-arrow @click-left="onClickLeft"  />
        <div class="title">
            <div>
            <p>嗨,您好</p>
            <p>欢迎注册下厨房</p>
            </div>
        </div>
        <div class="form">
            
            <div>
                <p>&nbsp;用户名</p>
                <input type="text" placeholder="请输入用户名" value="" v-model="name" @focus="myinput"/>
                <div v-html="txt1"></div>
            </div>

             <div></div>

             <div>
                 <p>&nbsp;密码</p>
                 <input :type="passwordType" name="" id="" placeholder="请输入密码" v-model="pwd" @focus="myinput"/>
                 <img src="../assets/eye_0.png" alt="" @click="changePassward" v-if="a">
                 <img src="../assets/eye_1.png" alt="" @click="changePassward1" v-else>
                <div v-html="txt2"></div>
             </div>

             <div></div>

             <div>
                 <p>&nbsp;二次密码</p>
                 <input :type="passwordType1" name="" id="" placeholder="请确认密码" v-model="pwd1" @focus="myinput"/>
                 <img src="../assets/eye_0.png" alt="" @click="changePassward2" v-if="b">
                 <img src="../assets/eye_1.png" alt="" @click="changePassward3" v-else>
                <div v-html="txt3"></div>
             </div>

            <div></div>
            <input type="text" placeholder="请输入验证码" v-model="txt5">
            <div v-html="txt4"></div>
            <div v-html="txt6"></div>
            <div></div>
            <button @click="myclick">注册</button>
            
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
      name:'',
      pwd:'',
      pwd1:'',
      passwordType:'password',
      passwordType1:'password',
      a:'true',
      b:'true',
      txt1:'',
      txt2:'',
      txt3:'',
      txt4:'',
      txt5:'',
      txt6:'',
      z:false,
      code:'',
    };
  },
  mounted(){
　　var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
　　　　　　'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',);
　　for(var i = 0;i < 4;i++)
　　{
　　　　var charNum = Math.floor(Math.random() * 36);
　　　　this.code += codeChars[charNum];
　　}
  this.txt4 = `<span style="position: relative;top:5px;left:13px;">${this.code}</span>`;
  },
  methods: {
    afterRead(file) {
        console.log(file);
      // 此时可以自行将文件上传至服务器
      let fd = new FormData();
      fd.append("uploadFile",file.content);//单个文件
        this.axios.post("/upload",`${fd}`).then(res=>{
            console.log(res);
        });
    },
    myclick(){
        //验证用户名和密码格式
        var reg = /^[a-zA-Z]\w{5,}$/;
        if(this.name == ''){
            this.txt1 = `<span style="font-size: 12px;color: red;">用户名不能为空</span>`;
            return;
        }
        if(!reg.test(this.name)){
            this.txt1 = `<span style="font-size: 12px;color: red;">格式错误，至少6位，必须由大小写字母开头</span>`;
            return;
        }
        var reg1 = /^\w{6,}$/;
        if(this.pwd == ''){
            this.txt2 = `<span style="font-size: 12px;color: red;">密码不能为空</span>`;
            return;
        }
        if(!reg1.test(this.pwd)){
            this.txt2 = `<span style="font-size: 12px;color: red;">密码至少6位，由大小写字母，数字，下划线组成</span>`
            return;
        }
        if(this.pwd1 !== this.pwd){
            this.txt3 = `<span style="font-size: 12px;color: red;">二次密码不相同</span>`;
            return;
        }
        if(this.code !== this.txt5){
            this.txt6 = `<span style="font-size: 12px;color: red;">验证码错误</span>`;
            return;
        }
       // 发起注册请求
        
             this.axios.get(`/users/${this.name}`).then(result=>{
            if(result.data.code == 201){
                this.axios.post('/users/reg',`uname=${this.name}&upwd=${this.pwd}`).then(()=>{
                     this.$toast("注册成功");
                     this.$router.push('/login');
                 })
             }else{
               this.txt1 = `<span style="font-size: 12px;color: red;">该用户已存在</span>`;
             }
         })
    },
    //查看密码
    changePassward(){
      this.a = !this.a;
      this.passwordType = this.passwordType==='password'?'text':'password';
      },
    changePassward1(){
      this.a = !this.a;
      this.passwordType = this.passwordType==='password'?'text':'password';
      },
    changePassward2(){
      this.b = !this.b;
      this.passwordType1 = this.passwordType1==='password'?'text':'password';
      },
    changePassward3(){
      this.b = !this.b;
      this.passwordType1 = this.passwordType1==='password'?'text':'password';
      },
      //导航栏返回登录界面
      onClickLeft(){
          this.$router.push('/login');
      },
      //取消提醒
      myinput(){
        this.txt1 = this.txt2 = this.txt3  = '';
     },
     },
    
}
</script>
<style>
.register .title,.register .form{
  width: 80%;
  margin: 0 auto;
}
.register .title {
    height: 150px;
}
.register .title>div{
    position: relative;
    top:40px;
}
.register .title>div>p {
    font-size: 24px;
    color: #656565;
}
.register button{
    width: 100%;
    background-color: #ff3333;
    border-radius: 30px;
    line-height: 35px;
    margin-top: 20px;
    border: 0;
    color: white;
}
.register>.form {
    margin-top: 20px;
}
.register>.form p{
  font-size: 0.5em;
}
.register>.form input {
  margin-top:10px;
  height: 20px;
  border: none;
}
.register>.form>div:nth-child(3)>img,.register>.form>div:nth-child(5)>img {
  float: right;
  width: 20px;
  margin-top: 8px;
  vertical-align: middle;
}
.register>.form>div:nth-child(1)>div,.register>.form>div:nth-child(3)>div,.register>.form>div:nth-child(5)>div,.register>.form>div:nth-child(9) {
  margin-top: 5px;
  height: 0;
  border-top: 1px solid #f0f0f0;
}
input::-webkit-input-placeholder { 
/* WebKit browsers */ 
color: #ccc; 
} 
.register>.form>div:nth-child(2),.register>.form>div:nth-child(4),.register>.form>div:nth-child(6){
  height: 20px;
}
.register>.form>div:nth-child(10){
    height: 10px;
}
.register>.form>div:last-child {
    text-align: center;

}
.register>.form>input:nth-child(7){
    width: 150px;
}
.register>.form>div:nth-child(8) {
    float: right;
    width: 120px;
    height: 30px;
    font-size: 24px;
    letter-spacing: 10px;
    border: 1px solid black;
    
}
input:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */ 
color: #ccc; 
} 
input::-moz-placeholder { 
/* Mozilla Firefox 19+ */ 
color: #ccc; 
} 
input:-ms-input-placeholder { 
/* Internet Explorer 10+ */ 
color: #ccc; 
}
</style>